<template>
	<div style="padding-bottom: 30px;">
		<div class="addBox">
			<h3 ><span>编辑课程</span></h3>
			<el-form class="form-container" style="font-size:14px;">
				<div class="label-div">
					<label><span style="color: red">*</span>课程名称:</label><el-input v-model="chooseCourseData.name" placeholder="请输入内容" style="width: 650px"></el-input>
				</div>
				<div class="label-div">
					<label>课程类型:</label>
					<el-select v-model="chooseCourseData.type" placeholder="请选择" style="width: 650px">
				    	<el-option value="视频"></el-option>
				    	<el-option value="音频"></el-option>
						<el-option value="图文"></el-option>
					</el-select>
				</div>
				<div class="label-div">
					<label>课程分类:</label>
					<el-select v-model="chooseCourseData.sort" placeholder="请选择分类" style="width: 500px">
				    	<el-option v-for="item in courseTypeOptions" :value="item.type" :key="item.id"></el-option>
					</el-select>
					<el-button type="primary" icon="el-icon-edit" @click="linkToCourseSort">添加分类</el-button>
				</div>
				<div class="label-div">
					<label><span style="color: red">*</span>观看权限:</label>
					<el-select v-model="chooseCourseData.lookLimit" placeholder="请选择权限" style="width: 650px">
				    	<el-option value="vip免费"></el-option>
				    	<el-option value="svip免费"></el-option>
						<el-option value="免费"></el-option>
						<el-option value="收费"></el-option>
					</el-select>
				</div>
				<div class="label-div" v-show="chooseCourseData.lookLimit!='免费'">
					<label><span style="color: red">*</span>课程价格:</label><el-input v-model="chooseCourseData.coursePrice" placeholder="请输入价格" style="width: 650px"></el-input>
				</div>
				<div class="label-div">
					<label>积分可抵扣金额:</label><el-input v-model="chooseCourseData.integrePrice" placeholder="请输入内容" style="width: 650px"></el-input>
				</div>
				<div class="label-div">
					<label>课程排序:</label><el-input v-model="chooseCourseData.order" placeholder="请输入内容" style="width: 650px"></el-input>
				</div>
				<div class="label-div">
					<label style="float: left;">是否预告:</label>
					<el-select v-model="chooseCourseData.selectPreview" placeholder="请选择" style="width: 650px">
				    	<el-option value="是"></el-option>
				    	<el-option value="否"></el-option>
					</el-select>
				</div>
				<div class="label-div">
					<label style="float: left;">是否热门:</label>
					<el-select v-model="chooseCourseData.selectHot" placeholder="请选择" style="width: 650px">
				    	<el-option value="是"></el-option>
				    	<el-option value="否"></el-option>
					</el-select>
				</div>
				<div class="label-div">
					<label style="float: left;">是否下架(下架则前端不显示):</label>
					<el-select v-model="chooseCourseData.selectDown" placeholder="请选择" style="width: 650px">
				    	<el-option value="是"></el-option>
				    	<el-option value="否"></el-option>
					</el-select>
				</div>
				<div class="label-div" v-show="chooseCourseData.selectPreview=='是'">
					<label>预告时间:</label><el-date-picker type="datetime" format="yyyy-MM-dd HH:mm:ss" placeholder="预告时间" v-model="chooseCourseData.preview_time" :picker-options="pickerOptions" style="width:650px"></el-date-picker>
				</div>
				<div class="label-div">
					<label>播放次数:</label><el-input v-model="chooseCourseData.playTimes" placeholder="请输入内容" style="width: 650px"></el-input>
				</div>
				<div class="label-div">
					<label>点赞次数:</label><el-input v-model="chooseCourseData.praiseTimes" placeholder="请输入内容" style="width: 650px"></el-input>
				</div>
				<div class="label-div">
					<label>作者名称:</label><el-input v-model="chooseCourseData.authorName" placeholder="请输入内容" style="width: 650px"></el-input>
				</div>
				<div class="label-div">
					<label>作者身份:</label><el-input v-model="chooseCourseData.authorIdentity" placeholder="请输入内容" style="width: 650px"></el-input>
				</div>
				<div style="margin: 0 20px;height: auto;line-height: 50px;overflow: hidden;">
					<label style="float: left;">作者头像(宽68*高68):</label>
					<el-upload style="float: left;"
					  class="upload-demo"
					  ref="upload"
					  action="https://jsonplaceholder.typicode.com/posts/"
					  :on-preview="handlePreview"
					  :on-remove="handleRemove"
					  :file-list="authorPic"
					  :limit="1"
 					 :on-exceed="handleExceed"
					  :auto-upload="false">
					  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
					  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
					</el-upload>
				</div>
				<div style="margin: 0 20px;height: auto;line-height: 50px;overflow: hidden;">
					<label style="float: left;">课程图片(宽180*高120):</label>
					<el-upload style="float: left;"
					  class="upload-demo"
					  ref="upload"
					  action="https://jsonplaceholder.typicode.com/posts/"
					  :on-preview="handlePreview"
					  :on-remove="handleRemove"
					  :file-list="coursePic"
					  :limit="1"
 					 :on-exceed="handleExceed"
					  :auto-upload="false">
					  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
					  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
					</el-upload>
				</div>
				<div v-if="chooseCourseData.selectPreview=='是'" style="margin: 0 20px;height: auto;line-height: 50px;overflow: hidden;">
					<label style="float: left;">预告二维码(宽640*高1280):</label>
					<el-upload style="float: left;"
					  class="upload-demo"
					  ref="upload"
					  action="https://jsonplaceholder.typicode.com/posts/"
					  :on-preview="handlePreview"
					  :on-remove="handleRemove"
					  :file-list="previewQrcode"
					  :limit="1"
 					 :on-exceed="handleExceed"
					  :auto-upload="false">
					  <el-button slot="trigger" size="small" type="primary">选取文件</el-button>
					  <el-button style="margin-left: 10px;" size="small" type="success" @click="submitUpload">上传到服务器</el-button>
					</el-upload>
				</div>
				<div style="overflow: hidden;margin: 0 20px;">
					<label for="" style="float: left;"><span style="color: red">*</span>课程简介:</label>
					<tinymce :height="300" v-model="chooseCourseData.courseIntroduce" style="width: 600px;float: left;"></tinymce>
					<p style="color: red;width: 100%;text-align: center;float: left; line-height: 36px;">注意：如果开启了邀请卡，则分享视音频免费收看功能自动失效</p>
				</div>
				<p style="text-align: center;padding: 20px 0;"><el-button type="primary" icon="el-icon-edit">保存</el-button></p>
			</el-form>
		</div>
	</div>
</template>
<script>
  export default {
    components: {
      Tinymce: require('@/components/Tinymce').default
    },
    data() {
      return {
      	pickerOptions: {
          disabledDate(time) {
            return time.getTime() < Date.now() - 24*60*60*1000;
        }},
        authorPic: [], // 作者头像文件
        coursePic: [], // 课程图片文件
        previewQrcode: [], // 预告二维码
        courseTypeOptions: [ // 课程分类
          {
            id: 0,
            type: 'PMP'
          },
          {
            id: 1,
            type: '2018首届西部营销会'
          },
          {
            id: 2,
            type: '功能更新'
          },
          {
            id: 3,
            type: '行业案例'
          },
          {
            id: 4,
            type: '音频专区'
          }
        ],
        chooseCourseData: {}, // 要编辑的课程
        tableData: [ // 所有课程
          {
            name: '音频分享免费',
            sort: '功能更新',
            courseNum: '2121',
            lookLimit: '免费',
            coursePrice: '0.00',
            teacher: '',
            courseColumn: '赠送专栏',
            isHot: false,
            isDown: false,
            type: '音频',
            isHaveVideo: false,
            isHaveAudio: true,
            time: '2018-04-07 11:00:00',
            integrePrice: '0.00',
            order: '10', // 排序
            selectPreview: '是', // 课程是否预告
            selectHot: '否', // 是否热门
            selectDown: '否', // 是否下架
            playTimes: '15',
            praiseTimes: '1',
            authorName: '',
            authorIdentity: '',
            courseIntroduce: ''
          },
          {
            name: '音频分享免费',
            sort: '功能更新',
            courseNum: '2122',
            lookLimit: '免费',
            coursePrice: '0.00',
            teacher: '',
            courseColumn: '赠送专栏',
            isHot: true,
            isDown: false,
            type: '音频',
            isHaveVideo: false,
            isHaveAudio: true,
            time: '2018-04-07 11:00:00',
            integrePrice: '0.00',
            order: '10', // 排序
            selectPreview: '是', // 课程是否预告
            selectHot: '否', // 是否热门
            selectDown: '否', // 是否下架
            playTimes: '15',
            praiseTimes: '1',
            authorName: '',
            authorIdentity: '',
            courseIntroduce: ''
          },
          {
            name: '音频分享免费',
            sort: '功能更新',
            courseNum: '2123',
            lookLimit: '免费',
            coursePrice: '0.00',
            teacher: '',
            courseColumn: '赠送专栏',
            isHot: false,
            isDown: false,
            type: '音频',
            isHaveVideo: false,
            isHaveAudio: true,
            time: '2018-04-07 11:00:00',
            integrePrice: '0.00',
            order: '10', // 排序
            selectPreview: '是', // 课程是否预告
            selectHot: '否', // 是否热门
            selectDown: '否', // 是否下架
            playTimes: '15',
            praiseTimes: '1',
            authorName: '',
            authorIdentity: '',
            courseIntroduce: ''
          },
          {
            name: '视频test',
            sort: 'PMP',
            courseNum: '2124',
            lookLimit: '免费',
            coursePrice: '0.00',
            teacher: '',
            courseColumn: '赠送专栏',
            isHot: false,
            isDown: false,
            type: '视频',
            isHaveVideo: false,
            isHaveAudio: true,
            time: '2018-04-07 11:00:00',
            integrePrice: '0.00',
            order: '10', // 排序
            selectPreview: '是', // 课程是否预告
            selectHot: '否', // 是否热门
            selectDown: '否', // 是否下架
            playTimes: '5',
            praiseTimes: '1',
            authorName: '',
            authorIdentity: '',
            courseIntroduce: ''
          }
        ]
      }
    },
    methods: {
      linkToCourseSort() {
        location.href = '#/courseSort/index' // 跳转至添加课程分类
      },
      submitUpload() {
        this.$refs.upload.submit()
      },
      handleRemove(file, fileList) {
        console.log(file, fileList)
      },
      handlePreview(file) {
        console.log(file)
      },
      handleExceed(files, fileList) {
        this.$message.warning(`当前限制选择 1 个文件，本次选择了 ${files.length} 个文件，共选择了 ${files.length + fileList.length} 个文件`)
      },
      beforeRemove(file, fileList) {
        return this.$confirm(`确定移除 ${file.name}？`)
      }
    },
    mounted() {
      for (var i in this.tableData) {
        if (this.tableData[i].courseNum === this.$route.params.courseId) {
          this.chooseCourseData = this.tableData[i]
        }
      }
      console.log('要编辑的课程编号为：' + this.chooseCourseData)
      /* // 将传过来的值赋值给data中对应的值，显示在页面上
      this.courseName = this.chooseCourseData.name
      this.selectCourseType = this.chooseCourseData.type
      this.selectCourseSort = this.chooseCourseData.sort
      this.selectLookLimit = this.chooseCourseData.lookLimit
      this.coursePrice = this.chooseCourseData.coursePrice
      this.integrePrice = this.chooseCourseData.integrePrice
      this.order = this.chooseCourseData.order
      this.selectPreview = this.chooseCourseData.selectPreview
      this.selectHot = this.chooseCourseData.selectHot
      this.selectDown = this.chooseCourseData.selectDown
      this.preview_time = this.chooseCourseData.time
      this.playTimes = this.chooseCourseData.playTimes
      this.praiseTimes = this.chooseCourseData.praiseTimes
      this.authorName = this.chooseCourseData.authorName
      this.authorIdentity = this.chooseCourseData.authorIdentity
      this.courseIntroduce = this.chooseCourseData.courseIntroduce*/
    }
  }
</script>
<style scoped>
	p,h3 {margin:0;padding:0}
	h3{
		font-weight: 500;
		font-size: 14px;
		height: 36px;
		background: #eee;
		border-bottom: 1px solid #ddd;
		padding: 0 20px;
		display: flex;
		flex-direction: row;
		justify-content: space-between;
		align-items: center;
	}
	h3 a{
		padding: 0 10px;
	}
	.filter {
		width: 100%;
		height: 100%;
		background: rgba(0,0,0,.3);
		position: absolute;
		left: 0;
		top: 0;
		z-index: 90;
	}
	.addBox {
		width: 100%;
		overflow: hidden;
	}
	form .label-div {
		margin: 0 20px;
		height: 50px;
		line-height: 50px;
		overflow: hidden;
	}
	form label {
		font-weight: 500;
		width: 190px;
		display: inline-block;
		text-align: right;
		margin-right: 30px;
	}
</style>
